<template>
  <div class="rule">
    <ul>
      <li></li>
      <li :class="{active:tabIndex===index}" @click='getcurrentvalue(index)' v-for='(item,index) in tabList' :key='index'>
        <span>{{item}}</span>
      </li>
      <li></li>
    </ul>
    <div style="margin-top:-1px;border-bottom: 1px solid #d9d9d9;"></div>
    <div class="question">
      <h3>书的价格是如何确定的?</h3>
      <p>12312312313123123</p>
    </div>
    <div class="question">
      <h3>书的价格是如何确定?</h3>
      <p>12312312313123123</p>
    </div>
    <div class="question">
      <h3>书的价格是如何确定?</h3>
      <p>12312312313123123</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabList: ['买书', '卖书'],
      tabIndex: 0
    }
  },
  methods: {
    getcurrentvalue(index) {
      this.tabIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.rule {
    padding: 0 18rpx;
    ul {
        width: 100%;
        overflow: hidden;
        li {
            width: 25%;
            float: left;
            height: 70rpx;
            text-align: center;
            span {
                font-size: 28rpx;
                counter-reset: #666;
                display: inline-block;
                margin-top: 18rpx;
                padding-bottom: 10rpx;
            }
            &.active {
                span {
                    color: #c78550;
                    border-bottom: 2px solid #c78550;
                }
            }
        }
    }
    .question {
        padding: 0 18rpx;
        h3 {
            font-size: 36rpx;
            color: #2b2b2b;
            margin-top: 30rpx;
            margin-bottom: 20rpx;
            font-weight: bolder;
        }
        p {
            font-size: 28rpx;
            line-height: 24rpx;
        }
    }
}
</style>
